<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>首页</title>
		<link rel="stylesheet" type="text/css" href="./css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="./css/toubu_dibu_gudingdingwei.css"/>
		<link href="https://cdn.bootcdn.net/ajax/libs/Swiper/5.4.5/css/swiper.min.css" rel="stylesheet">
		<link rel="stylesheet" type="text/css" href="./css/index.css"/>
	</head>
	
	<body>
		
		<!-- 头部开始 -->
		<div class="top">
			<div class="content ">
	
				<!-- 左浮动 -->
				<div class="fl">
					<a href="index.html"><img src="./images/logo.jpg" alt=""></a>
					<ul>
						<li><a href="index.html">课程</a></li>
						<li><a href="zixun.html">资讯</a></li>
						<li><a href="teacher.html">讲师</a></li>
						<li><a href="tiku.html">题库</a></li>
						<li><a href="wenda.html">问答</a></li>
						<div class="cl"></div>
					</ul>
				</div>
				
				<!-- 右浮动 -->
				<div class="fr">
					<a href="denglu.html">登录</a>
				</div>
				
				<!-- 清浮动 -->
				<div class="cl">
					
				</div> 
				
			</div>
		</div>
		<!-- 头部结束 -->
		
		<!-- 轮播图开始 -->
		<div class="lunbo">
			<div class="swiper-container swiper-test">
				<div class="swiper-wrapper">
					<div class="swiper-slide q2">
						<img class="img1" src="./images/slider-10.png" alt="">
					    <img class="img2" src="./images/rb.png" >
						
						<div class="p">凌霄网全新上线</div>
						<div class="p2">
						请自备小板凳，强势围观。
					</div>
						<div class="p3"><a href="wenda.html">在线测评</a></div>
					</div>
					<div class="swiper-slide q1">
						<img class="zhongjian" src="./images/our-features.png" alt=""> 
						<img class="a1" src="./images/clean.png" alt="">
						<img class="a2" src="./images/lu.png" alt="">
						<img class="b1" src="./images/responsive.png" alt="">
						<img class="b2" src="./images/lm.png" alt="">
						<img class="c1" src="./images/bootstrap.png" alt="">
						<img class="c2" src="./images/lb.png" alt="">

                      
                       <img class="d1" src="./images/solid.png" alt="">
                       <img class="d2" src="./images/ru.png" alt="">
                       <img class="e1" src="./images/lightweight.png" alt="">
                       <img class="e2" src="./images/rm.png" alt="">
                       <img class="f1" src="./images/fresh.png" alt="">
                       <img class="f2" src="./images/rb.png">

					</div>
					<div class="swiper-slide q2 q3">
						<img class="img2" src="./images/rb.png" >
						<img style="right: 18%;" class="img1" >
						<img class="img3" src="./images/spotlight.png" >
						<img class="img1" style="display: none; right: 18%;" src="./images/guy-shadow.png" alt="">
						
						<div class="p" style="font-size: 30px;">
							凌霄教育在线测评与学习平台
						</div>
							<div class="p2" style="top: 32%;">
							我们一直致力于优秀的英语教育，
							<br>
							为你搭建成就梦想的舞台。
							<br>
						</div>
							<div class="p3"><a href="tiku.html">在线学习</a></div>
					</div>
				</div>
				<div class="swiper-pagination"></div>
				<div class="swiper-button-prev"></div>
				<div class="swiper-button-next"></div>
			</div>
		</div>
		<!-- 轮播图结束 -->
		
		<!-- 免费课程开始 -->
		<div class="mianfei">
			<div class="content">
					<img class="fl" src="./images/ico4.jpg" alt="">
				<div class="fr">
					<p class="w1">完全免费课程</p>
					<p class="w2">精心录制视频课程与讲解，全部课程完全免费。</p>
					<p class="w3"><a href="tiku.html">免费学习</a></p>
				</div>
				<div class="cl"></div>
			</div>
		</div>
		<!-- 免费课程结束 -->
		
		<!-- 智能评估开始 -->
		<div class="mianfei " style="background: #FFFFFF;">
			<div class="content">
					<img style="float: right; margin-right:80px; width: 500px;" src="./images/ico5.jpg" alt="">
				<div class=" fr "  style="margin-right: 625px;">
					<p class="w1" style="color: #88d2e7;">智能评估题库</p>
					<p class="w2">智能能力评估，学员可以通过具体题目，匹配相
关知识点,文字解析与视频解析相结合。</p>
					<p class="w3"><a href="tiku.html">点击测评</a></p>
				</div>
				<div class="cl"></div>
			</div>
		</div>
		<!-- 智能评估结束 -->
		
		<!-- 全天答疑开始 -->
		<div class="mianfei">
			<div class="content">
					<img style="width: 550px;" src="./images/ico6.jpg" alt="">
				<div class="fr">
					<p class="w1" style="color: #5aaae4;">全天答疑解惑</p>
					<p class="w2">凌霄网答疑社区，老师学员共同交流，我们的讲师更是倾囊相授，有问必答。</p>
					<p class="w3"><a href="wenda.html">提问问题</a></p>
				</div>
				<div class="cl"></div>
			</div>
		</div>
		<!-- 全天答疑开始 -->
		
		
		
		<!-- 精品课程开始 -->
		<div class="jingpin">
			<div class="jingpin-content">
				<div class="jingpin-title">
					精品课程
				</div>
				
				<!-- 选项卡 -->
				<div class="tab">
					<div class="item">
						<div class="item-a active-a">语法技能</div>
						<div class="item-a">口语技能</div>
						<div class="item-a">阅读技能</div>
						<div class="item-a">作文技能</div>
						<div class="cl"></div>
					</div>
					<div class="list">
						<ul>
							<li class="show-a">
								<div class="bbb">
									<a href="tiku.html"><img src="./images/y1.jpg" alt=""></a>
									
									<div class="y1 bbb-p" style="text-align: center;" >语法下载课程</div>
									<div class="y2">
										<div class="bbb-p">
											<b class="fl" style="color: #999; font-size: 14px;">1小时前更新</b>
											<b class="fr" style="color: #999; font-size: 14px;">365443人学习</b>
											<div class="cl"></div>
										</div>
									</div>
								</div>
								<div class="bbb">
									<a href="tiku.html"><img src="./images/y1.jpg" alt=""></a>
									
									<div class="y1 bbb-p" style="text-align: center;" >语法下载课程</div>
									<div class="y2">
										<div class="bbb-p">
											<b class="fl" style="color: #999; font-size: 14px;">1小时前更新</b>
											<b class="fr" style="color: #999; font-size: 14px;">75434人学习</b>
											<div class="cl"></div>
										</div>
									</div>
								</div>
								<div class="bbb">
									<a href="tiku.html"><img src="./images/y1.jpg" alt=""></a>
									
									<div class="y1 bbb-p" style="text-align: center;" >语法下载课程</div>
									<div class="y2">
										<div class="bbb-p">
											<b class="fl" style="color: #999; font-size: 14px;">1小时前更新</b>
											<b class="fr" style="color: #999; font-size: 14px;">8767554人学习</b>
											<div class="cl"></div>
										</div>
									</div>
								</div>
								<div class="bbb">
									<a href="tiku.html"><img src="./images/y1.jpg" alt=""></a>
									
									<div class="y1 bbb-p" style="text-align: center;" >语法下载课程</div>
									<div class="y2">
										<div class="bbb-p">
											<b class="fl" style="color: #999; font-size: 14px;">1小时前更新</b>
											<b class="fr" style="color: #999; font-size: 14px;">635322人学习</b>
											<div class="cl"></div>
										</div>
									</div>
								</div>
								<div class="bbb">
									<a href="tiku.html"><img src="./images/y1.jpg" alt=""></a>
									
									<div class="y1 bbb-p" style="text-align: center;" >语法下载课程</div>
									<div class="y2">
										<div class="bbb-p">
											<b class="fl" style="color: #999; font-size: 14px;">1小时前更新</b>
											<b class="fr" style="color: #999; font-size: 14px;">6435343人学习</b>
											<div class="cl"></div>
										</div>
									</div>
								</div>
								<div class="bbb">
									<a href="tiku.html"><img src="./images/y1.jpg" alt=""></a>
									
									<div class="y1 bbb-p" style="text-align: center;" >语法下载课程</div>
									<div class="y2">
										<div class="bbb-p">
											<b class="fl" style="color: #999; font-size: 14px;">1小时前更新</b>
											<b class="fr" style="color: #999; font-size: 14px;">653434人学习</b>
											<div class="cl"></div>
										</div>
									</div>
								</div>
								<div class="bbb">
									<a href="tiku.html"><img src="./images/y1.jpg" alt=""></a>
									
									<div class="y1 bbb-p" style="text-align: center;" >语法下载课程</div>
									<div class="y2">
										<div class="bbb-p">
											<b class="fl" style="color: #999; font-size: 14px;">1小时前更新</b>
											<b class="fr" style="color: #999; font-size: 14px;">3421455人学习</b>
											<div class="cl"></div>
										</div>
									</div>
								</div>
								<div class="bbb">
									<a href="tiku.html"><img src="./images/y1.jpg" alt=""></a>
									
									<div class="y1 bbb-p" style="text-align: center;" >语法下载课程</div>
									<div class="y2">
										<div class="bbb-p">
											<b class="fl" style="color: #999; font-size: 14px;">1小时前更新</b>
											<b class="fr" style="color: #999; font-size: 14px;">873632人学习</b>
											<div class="cl"></div>
										</div>
									</div>
								</div>
								<div class="cl"></div>
							</li>
							<li>
								<div class="bbb">
									<a href="tiku.html"><img src="./images/y1.jpg" alt=""></a>
									
									<div class="y1 bbb-p" style="text-align: center;" >口语下载课程</div>
									<div class="y2">
										<div class="bbb-p">
											<b class="fl" style="color: #999; font-size: 14px;">1小时前更新</b>
											<b class="fr" style="color: #999; font-size: 14px;">788433人学习</b>
											<div class="cl"></div>
										</div>
									</div>
								</div>
								<div class="bbb">
									<a href="tiku.html"><img src="./images/y1.jpg" alt=""></a>
									
									<div class="y1 bbb-p" style="text-align: center;" >口语下载课程</div>
									<div class="y2">
										<div class="bbb-p">
											<b class="fl" style="color: #999; font-size: 14px;">1小时前更新</b>
											<b class="fr" style="color: #999; font-size: 14px;">546773人学习</b>
											<div class="cl"></div>
										</div>
									</div>
								</div>
								<div class="bbb">
									<a href="tiku.html"><img src="./images/y1.jpg" alt=""></a>
									
									<div class="y1 bbb-p" style="text-align: center;" >口语下载课程</div>
									<div class="y2">
										<div class="bbb-p">
											<b class="fl" style="color: #999; font-size: 14px;">1小时前更新</b>
											<b class="fr" style="color: #999; font-size: 14px;">9842974人学习</b>
											<div class="cl"></div>
										</div>
									</div>
								</div>
								<div class="cl"></div>
								
							</li>
							<li>
								<div class="bbb">
									<a href="tiku.html"><img src="./images/y1.jpg" alt=""></a>
									
									<div class="y1 bbb-p" style="text-align: center;" >阅读下载课程</div>
									<div class="y2">
										<div class="bbb-p">
											<b class="fl" style="color: #999; font-size: 14px;">1小时前更新</b>
											<b class="fr" style="color: #999; font-size: 14px;">7849494人学习</b>
											<div class="cl"></div>
										</div>
									</div>
								</div>
								<div class="bbb">
									<a href="tiku.html"><img src="./images/y1.jpg" alt=""></a>
									
									<div class="y1 bbb-p" style="text-align: center;" >阅读下载课程</div>
									<div class="y2">
										<div class="bbb-p">
											<b class="fl" style="color: #999; font-size: 14px;">1小时前更新</b>
											<b class="fr" style="color: #999; font-size: 14px;">23444人学习</b>
											<div class="cl"></div>
										</div>
									</div>
								</div>
								<div class="bbb">
									<a href="tiku.html"><img src="./images/y1.jpg" alt=""></a>
									
									<div class="y1 bbb-p" style="text-align: center;" >阅读下载课程</div>
									<div class="y2">
										<div class="bbb-p">
											<b class="fl" style="color: #999; font-size: 14px;">1小时前更新</b>
											<b class="fr" style="color: #999; font-size: 14px;">78944人学习</b>
											<div class="cl"></div>
										</div>
									</div>
								</div>
								<div class="cl"></div>
							</li>
							<li>
								<div class="bbb">
									<a href="tiku.html"><img src="./images/y1.jpg" alt=""></a>
									
									<div class="y1 bbb-p" style="text-align: center;" >作业下载课程</div>
									<div class="y2">
										<div class="bbb-p">
											<b class="fl" style="color: #999; font-size: 14px;">1小时前更新</b>
											<b class="fr" style="color: #999; font-size: 14px;">434444人学习</b>
											<div class="cl"></div>
										</div>
									</div>
								</div>
								<div class="bbb">
									<a href="tiku.html"><img src="./images/y1.jpg" alt=""></a>
									
									<div class="y1 bbb-p" style="text-align: center;" >作文下载课程</div>
									<div class="y2">
										<div class="bbb-p">
											<b class="fl" style="color: #999; font-size: 14px;">1小时前更新</b>
											<b class="fr" style="color: #999; font-size: 14px;">43435人学习</b>
											<div class="cl"></div>
										</div>
									</div>
								</div>
								<div class="cl"></div>
							</li>
						</ul>
						
						
					</div>

				</div>
				
				
				<!-- 更多课程 -->
				<div class="gengduokecheng">
					<div><a href="tiku.html">更多课程</a></div>
				</div>
			</div>
		</div>
		<!-- 精品课程结束 -->
		
		
		<!-- 底部开始 -->
		<div class="bottom">
			<div class="content">
				<div>
					<ul>
						<li> <span>关注微信</span><img src="./images/w1.jpg" alt=""></li>
						<li> <span>关注微博</span><img src="./images/w2.jpg""></li>
						<div class="cl"></div>
					</ul>
				</div>
				<p>
					<a href="">关于我们</a>|
					<a href="">联系我们</a>|
					<a href="">优秀讲师</a>|
					<a href="">帮助中心</a>|
					<a href="">意见反馈</a>|
					<a href="">加入我们</a>
				</p>
				<p>天津市大学软件学院 &nbsp;所有&nbsp;web大作业</p>
				<p>教学3班&nbsp;&nbsp;杨凌霄</p>
			</div>
		</div>
		<!-- 底部结束 -->
		
		<script src="https://cdn.bootcdn.net/ajax/libs/Swiper/5.4.5/js/swiper.min.js"></script>
		<script>
			// 轮播图开始
			var test = new Swiper('.lunbo .swiper-test',{
				loop:true,//循环
				autoplay: {
					delay: 2000,
				},
				navigation: {
					nextEl: '.lunbo .swiper-test .swiper-button-next',
					prevEl: '.lunbo .swiper-test .swiper-button-prev',
				},
			})
			
			// 选项卡
			var item= document.querySelectorAll(".tab .item .item-a");
			var contents= document.querySelectorAll(".tab ul li");
			// console.log(contents);
			
			for(var i=0;i<item.length;i++){
				
				//自定义属性
				item[i].setAttribute('index',i);
				
				//绑定点击事件
				item[i].onclick = function(){
				
				// 被选中元素含有的类名
				// console.log(this.classList);
				
				// 获取自定义属性的值
				var index = this.getAttribute('index');
				// console.log(index); //0 1 2 
				for(var j=0;j<item.length;j++){
					//删除指定的类名
					item[j].classList.remove('active-a');
					contents[j].classList.remove('show-a');
				}
				item[index].classList.add('active-a');
				contents[index].classList.add('show-a');	
				}
			}
		</script>
	</body>
</html>
